import { Component, ComponentProps, VueComponent, Link, Hook, Mut } from "vue3-oop";
import { NCard, NSpace, NTag } from 'naive-ui'
import styles from './index.module.scss'
import { nicon } from "@/utils/IconUtil";
import Toolbar from './Toolbar'
import PropsPanel from './PropsPanel'
import BpmnModeler from './BpmnModeler'

interface IProps {
  maxWidth?:number,
  maxHeight?:number
}
@Component()
export default class Index extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    maxWidth: {default: 800},
    maxHeight: {default: 600}
  }

  constructor() {
    super()
  }

  // 绘制区域REF
  @Link() private bpmnCanvas?: Element;
  // 属性面板REF
  @Link() private propsPanel?: PropsPanel;
  // Bpmn绘图工具
  @Mut() private bpmnModeler?: BpmnModeler;

  @Hook("Mounted")
  onMounted(){
    this.bpmnModeler = new BpmnModeler(this.bpmnCanvas as HTMLElement);
  }

  render(){
    const height = this.props.maxHeight, width = this.props.maxWidth;
    return (
      <NCard
        class={[styles.bpmn_test_view]}
        style={{height:`${height}px`}}
      >
        {{
          header:()=>(
            <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
              {{ avatar: nicon("DocumentFlowchart20Filled"), default: ()=>"BPMN绘图" }}
            </NTag></NSpace>
          ),
          'header-extra':()=>(this.bpmnModeler?<Toolbar bpmnModeler={this.bpmnModeler} />:null),
          default:()=>(
            <NCard
              {...{id:"bpmnWrapper"}}
              class={[styles.bpmn_canvas_wrapper]}
            >
              <div
                ref="bpmnCanvas"
                class={[styles.bpmn_canvas_view]}
                onDblclick={()=>{this.propsPanel?.toggleShowPanel()}}
              />
              { this.bpmnModeler &&
              <PropsPanel
                ref="propsPanel"
                drawerTo='#bpmnWrapper'
                bpmnModeler={this.bpmnModeler}
              />}
            </NCard>
          )
        }}
      </NCard>
    )
  }
}